<template>
  <div class="container auth-page">
    <div class="tips-t pad-t-10 pad-b-10 pad-l-12 pad-r-12">温馨提示：根据国家法律规定和为了保障您个人的财产资金安全，完善以下信息后才可获取卖家操作权限。</div>
    <div class="panel panel-box pad-t-5 pad-b-5">
      <div class="flex v-align-c div-input mar-r-20">
        <div class="form-l">真实姓名</div>
        <div class="flex-item"><input v-model="member.legalName" :disabled="disabledRead" maxlength="6" placeholder="请输入真实姓名"/></div>
      </div>
      <div v-if="getShowBuyCard" class="flex v-align-c div-input">
        <div class="form-l">身份证号</div>
        <div class="flex-item"><input v-model="member.legalIdCard" :disabled="disabledRead" maxlength="18" placeholder="请输入身份证号码"/></div>
      </div>
    </div>
    <div class="panel panel-box pad-t-5 pad-b-5">
      <div class="flex v-align-c div-input" @click="showProvincePicker">
        <div class="form-l">所在省</div>
        <div class="flex-item select-bar" :class="disabledRead ? 'disabledRead' : ''">
          <div class="flex v-align-c">
            <label class="flex-item">{{pickProvinceText}}</label>
            <icon class="iconfont icon-arrow-right"></icon>
          </div>
        </div>
      </div>
      <div class="flex v-align-c div-input" @click="showCityPicker">
        <div class="form-l">所在市</div>
        <div class="flex-item select-bar" :class="disabledRead ? 'disabledRead' : ''">
          <div class="flex v-align-c">
            <label class="flex-item">{{pickCityText}}</label>
            <icon class="iconfont icon-arrow-right"></icon>
          </div>
        </div>
      </div>      
      <div class="flex v-align-c div-input" @click="showDistrictPicker">
        <div class="form-l">所在区</div>
        <div class="flex-item select-bar" :class="disabledRead ? 'disabledRead' : ''">
          <div class="flex v-align-c">
            <label class="flex-item">{{pickDistrictText}}</label>
            <icon class="iconfont icon-arrow-right"></icon>
          </div>
        </div>
      </div>
      <div class="flex v-align-c div-input mar-t--10 mar-b--10">
        <div class="form-l">详情地址</div>
        <div class="flex-item">
          <div class="flex v-align-c">            
            <div class="address-textarea font-14 mar-t-10 mar-r-10">
              <input v-model="selAddress" :disabled="disabledRead" placeholder="请输入详情地址"/>
            </div>
            <div class="select-local flex v-align-c"
              :class="disabledRead ? 'disabledRead' : ''" @click="chooseLocation">
              <img v-if="fileSpace" mode="widthFix" class="width-15 height-17"
                :src="fileSpace + '/images/local-seticon-2.png'"/>
              <label class="flex-item">选择地址</label>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="height-66"></div>
    <div class="pad-10 submit-btn">
      <button @click="save" class="p-button">提交</button>
    </div>
    <div class="pad-t-10"></div>
    <!-- 选择银行列表 -->
    <van-popup
      :show="isShowBankPicker"
      position="bottom"
      @close="onBankClose">
      <van-picker
        show-toolbar
        :columns="pickerBankArray"
        @cancel="onBankClose"
        @confirm="onBankConfirm"/>
    </van-popup>
    <!-- 选择省列表 -->
    <van-popup
      :show="isShowProvincePicker"
      position="bottom"
      @close="onProvinceClose">
      <van-picker
        show-toolbar
        :columns="pickerProvinceArray"
        @cancel="onProvinceClose"
        @confirm="onProvinceConfirm"/>
    </van-popup>
    <!-- 选择市列表 -->
    <van-popup
      :show="isShowCityPicker"
      position="bottom"
      @close="onCityClose">
      <van-picker
        show-toolbar
        :columns="pickerCityArray"
        @cancel="onCityClose"
        @confirm="onCityConfirm"/>
    </van-popup>
    <!-- 选择区列表 -->
    <van-popup
      :show="isShowDistrictPicker"
      position="bottom"
      @close="onDistrictClose">
      <van-picker
        show-toolbar
        :columns="pickerDistrictArray"
        @cancel="onDistrictClose"
        @confirm="onDistrictConfirm"/>
    </van-popup>
  </div>
</template>

<script>
  import { saveMemberMerchant, listProvince, listCity, listDistrict } from '@/api/personal'
  import { getMemberInfo } from '@/api/home'
  // import { listBank } from '@/api/common'
  import GetFormId from '@/components/GetFormId'
  import { setMemberId, setVeekrayStatus } from '@/utils/auth'

  export default {
    components: { GetFormId },
    data() {
      return {
        // 银行初始数据
        isShowBankPicker: false,
        pickerBankArray: [],
        pickBankId: '',
        pickBankText: '请选择开户行',
        // 省初始数据
        isShowProvincePicker: false,
        pickerProvinceArray: [],
        pickProvinceCode: '',
        pickProvinceText: '选择您所在的省',
        provinceParentId: '',
        // 市初始数据
        isShowCityPicker: false,
        pickerCityArray: [],
        pickCityCode: '',
        pickCityText: '选择您所在的市',
        cityParentId: '',
        // 区初始数据
        isShowDistrictPicker: false,
        pickerDistrictArray: [],
        pickDistrictCode: '',
        pickDistrictText: '选择您所在的区',
        bankMap: {},
        member: {},
        selAddress: '',
        disabledRead: false,
        info: {},
        queryData: {},
        files: [],
        handBankcardPic: '',
        idCardFrontPic: '',
        idCardBackPic: '',
        handIdCardPic: ''
      }
    },
    mounted() {
      this.urlFrom = this.getCurrentPage().query.urlFrom
      this.queryData.nature = this.getCurrentPage().query.nature
      this.queryData.recruiterId = this.getCurrentPage().query.recruiterId
      this.queryData.enterpriseId = this.getCurrentPage().query.enterpriseId
      const pageFrom = this.getCurrentPage().query.pageFrom
      if (pageFrom) this.getMemberInfo()
    },
    methods: {
      // 选择省下拉
      showProvincePicker() {
        if (this.disabledRead) return
        if (this.pickerProvinceArray.length === 0) {
          this.$utils.showToast({
            title: '数据加载中',
            icon: 'loading'
          })
          setTimeout(() => {
            this.$pt.hideToast()
          }, 1000)
        }
        this.isShowProvincePicker = true
      },
      onProvinceClose() {
        this.isShowProvincePicker = false
        this.$pt.hideToast()
      },
      onProvinceConfirm(e) {
        this.isShowProvincePicker = false
        this.$pt.hideToast()
        if (e.mp.detail.value.text !== this.pickProvinceText) {
          this.pickerCityArray = []
          this.pickCityCode = ''
          this.cityParentId = ''
          this.pickCityText = '选择您所在的市'
          this.pickerDistrictArray = []
          this.pickDistrictCode = ''
          this.pickDistrictText = '选择您所在的区'
        }
        this.pickProvinceCode = e.mp.detail.value.value
        this.pickProvinceText = e.mp.detail.value.text
        this.provinceParentId = e.mp.detail.value.areaId
        this.listCity()
      },
      // 选择市下拉
      showCityPicker() {
        if (this.disabledRead) return
        if (!this.pickProvinceCode) return this.$utils.showToast({ title: '请先选择您所在的省' })
        this.isShowCityPicker = true
      },
      onCityClose() {
        this.isShowCityPicker = false
        this.$pt.hideToast()
      },
      onCityConfirm(e) {
        this.isShowCityPicker = false
        this.$pt.hideToast()
        if (e.mp.detail.value.text !== this.pickCityText) {
          this.pickerDistrictArray = []
          this.pickDistrictCode = ''
          this.pickDistrictText = '选择您所在的区'
        }
        this.pickCityCode = e.mp.detail.value.value
        this.pickCityText = e.mp.detail.value.text
        this.cityParentId = e.mp.detail.value.areaId
        this.listDistrict()
      },
      // 选择区下拉
      showDistrictPicker() {
        if (this.disabledRead) return
        if (!this.pickProvinceCode) return this.$utils.showToast({ title: '请先选择您所在的省' })
        if (!this.pickCityCode) return this.$utils.showToast({ title: '请先选择您所在的市' })
        this.isShowDistrictPicker = true
      },
      onDistrictClose() {
        this.isShowDistrictPicker = false
        this.$pt.hideToast()
      },
      onDistrictConfirm(e) {
        this.isShowDistrictPicker = false
        this.$pt.hideToast()
        this.pickDistrictCode = e.mp.detail.value.value
        this.pickDistrictText = e.mp.detail.value.text
      },
      // 选择银行下拉
      showBankPicker() {
        this.isShowBankPicker = true
      },
      onBankClose() {
        this.isShowBankPicker = false
      },
      onBankConfirm(e) {
        this.isShowBankPicker = false
        this.pickBankId = e.mp.detail.value.value
        this.pickBankText = e.mp.detail.value.text
        this.member.bankId = this.pickBankId
      },
      save() {
        this.$utils.showToast({
          title: '数据提交中',
          icon: 'loading',
          duration: 150000,
          mask: true
        })
        this.info = {
          memberId: this.getCustomerId,
          legalName: this.member.legalName,
          // 个人真实信息
          merContactPhone: this.getPhone,
          legalIdCard: this.member.legalIdCard,
          idCardFrontPic: this.member.idCardFrontPic,
          idCardBackPic: this.member.idCardBackPic,
          handIdCardPic: this.member.handIdCardPic,
          // 省市区详情地址
          merProvinceCode: this.pickProvinceCode,
          merCityCode: this.pickCityCode,
          merDistrictCode: this.pickDistrictCode,
          merAddress: this.selAddress
        }
        if (this.queryData.nature) {
          this.info.nature = this.queryData.nature
          this.info.recruiterId = this.queryData.recruiterId
          this.info.enterpriseId = this.queryData.enterpriseId
        }
        if (!this.member.legalName) return this.$utils.showToast({ title: '请输入真实姓名' })
        if (this.getShowBuyCard) {
          if (!this.member.legalIdCard) return this.$utils.showToast({ title: '请输入身份证号码' })
          if (/.*[\u4e00-\u9fa5]+.*$/.test(this.member.legalIdCard)) return this.$utils.showToast({ title: '请输入正确的身份证号码' })
        }
        if (!this.pickProvinceCode) return this.$utils.showToast({ title: '请选择所在省' })
        if (!this.pickCityCode) return this.$utils.showToast({ title: '请选择所在市' })
        if (!this.pickDistrictCode) return this.$utils.showToast({ title: '请选择所在区' })
        if (!this.selAddress) return this.$utils.showToast({ title: '请输入详情地址' })
        saveMemberMerchant(this.info).then((response) => {
          if (response.isError) return
          this.$pt.hideToast()
          this.$utils.showToast({ title: '提交成功！' })
          setTimeout(() => {
            this.$pt.reLaunch({ url: '/pages/home/main' })
          }, 800)
        }).catch(() => {
        })
      },
      listProvince() {
        listProvince().then((response) => {
          if (response.isError) return
          this.$pt.hideToast()
          // 省数据
          const provinceOptions = []
          response.data.forEach(item => {
            const obj = {
              text: item.areaName,
              value: item.areaCode,
              areaId: item.areaId,
              areaLevel: item.areaLevel
            }
            provinceOptions.push(obj)
          })
          this.pickerProvinceArray = provinceOptions
        }).catch(() => {
        })
      },
      listCity() {
        listCity({
          provinceCode: this.pickProvinceCode
        }).then((response) => {
          if (response.isError) return
          this.$pt.hideToast()
          // 市数据
          const cityOptions = []
          response.data.forEach(item => {
            const obj = {
              text: item.areaName,
              value: item.areaCode,
              areaId: item.areaId,
              areaLevel: item.areaLevel,
              parentId: item.parentId
            }
            cityOptions.push(obj)
          })
          this.pickerCityAllArray = cityOptions
          let useCityList = []
          useCityList = this.pickerCityAllArray.filter(e => e.parentId === this.provinceParentId)
          this.pickerCityArray = useCityList
        }).catch(() => {
        })
      },
      listDistrict() {
        listDistrict({
          cityCode: this.pickCityCode
        }).then((response) => {
          if (response.isError) return
          this.$pt.hideToast()
          // 区数据
          const districtOptions = []
          response.data.forEach(item => {
            const obj = {
              text: item.areaName,
              value: item.areaCode,
              areaId: item.areaId,
              areaLevel: item.areaLevel,
              parentId: item.parentId
            }
            districtOptions.push(obj)
          })
          this.pickerDistrictAllArray = districtOptions
          let useDistrictList = []
          useDistrictList = this.pickerDistrictAllArray.filter(e => e.parentId === this.cityParentId)
          this.pickerDistrictArray = useDistrictList
        }).catch(() => {
        })
      },
      chooseLocation() {
        if (this.disabledRead) return
        const that = this
        that.$pt.chooseLocation({
          success: (res) => {
            this.selAddress = res.address
            this.member.latitude = res.latitude
            this.member.longitude = res.longitude
          },
          fail: function(err) {
            if (err.errMsg.indexOf('cancel') !== -1) return
            that.$pt.showModal({
              content: '需要访问你的位置',
              success(res) {
                if (res.confirm) {
                  that.$pt.openSetting()
                } else if (res.cancel) {
                  console.log(err)
                }
              }
            })
          }
        })
      },
      getMemberInfo() {
        this.$utils.showToast({
          title: '数据加载中',
          icon: 'loading',
          duration: 150000,
          mask: true
        })
        getMemberInfo(this.getCustomerId).then((response) => {
          if (response.isError) return
          this.$pt.hideToast()
          const member = response.data
          if (response.data.veekrayStatus === 1) {
            setMemberId(this.getCustomerId)
            this.$utils.setMyId(this.getCustomerId)
            setVeekrayStatus(response.data.veekrayStatus)
          }
          if (member.authFlag === 1) {
            this.disabledRead = true
          } else {
            this.disabledRead = false
          }
          if (member.authFlag === 0) {
            this.listProvince()
          }
          // listBank().then((response) => {
          //   if (response.isError) return
          //   const banks = response.data
          //   this.pickerBankArray = []
          //   banks.forEach(bank => {
          //     this.pickerBankArray.push({
          //       text: bank.bankName,
          //       value: bank.bankId
          //     })
          //     this.bankMap[bank.bankId] = bank.bankName
          //   })
          //   this.pickBankId = member.bankId
          //   this.pickBankText = this.bankMap[member.bankId]
          //   if (member.authFlag === 0) {
          //     this.listProvince()
          //   }
          // }).catch(() => {
          // })
        }).catch(() => {
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .container{
    background: #f4f4f4;
    min-height: calc(100vh);
  }
  .disabledRead{
    opacity: 0.5;
  }
  .select-bar{
    border: #9e9e9e 1px solid;
    padding: 4px 8px;
    color: #565656;
    .icon-arrow-right{
      color: #9e9e9e;
      transform:rotate(90deg);
    }
  }
  .select-local{
    border: #9e9e9e 1px solid;
    border-radius: 100px;
    padding: 5px 6px;
    label{
      font-size: 10px;
      color: #9e9e9e;
      display: block;
      width: 45px;
      margin-left: 5px;
    }
  }
  .submit-btn{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #fff;
    box-sizing: border-box;
    z-index: 20;
  }
  .address-textarea {
    width: 100%;
    line-height: 1.2;
    height: 40px;
  }
  .form-l{
    text-align: right;
    width: 85px;
    font-weight: bold;
    font-size: 15px;
    padding-left: 15px;
    margin-right: 25px;
    color: #292929;
  }
  .upload-bar{
    text-align: center;
    width: 140px;
    height: 80px;
    border-radius: 5px;
    box-sizing: border-box;
    border: #aeaeae 1px dashed;
    img{
      display: inline-block;
    }
    label{
      display: block;
      font-size: 12px;
      color: #595959;
      margin-top: -4px;
    }
  }
  .border-b{
    border-bottom: #f1f1f1 1px solid;
  }
  .panel-box{
    border-radius: 0px;
    box-shadow: none;
    border-top: none;
    border-bottom: none;
    margin-left: 0;
    margin-right: 0;
  }
  .p-button{
    display: block;
    border-radius: 100px;
    height: 46px;
    line-height: 46px;
    font-size: 16px;
    color: #333333;
    font-weight: bold;
    text-align: center;
    border: none;
    background: linear-gradient(to right, #fed801, #fcc508);
    &[disabled]{
      color: #595959;
      background: linear-gradient(to right, #dadada, #dadada);
    }
    &:after{
      content: '';
      display: none;
    }
  }
  .tips-t{
    color: #818181;
    font-size: 12px;
    // font-weight: bold;
  }
  .s-input-bar{
    // border: #c5c5c5 1px solid;
    // border-radius: 8px;
    font-size: 12px;
    padding: 0 0 0 8px;
    overflow: hidden;
    input{
      width: 70%!important;
    }
    .per-span{
      text-align: right;
      display: block;
      height: 30px;
      line-height: 30px!important;
      padding: 0 8px 0 0;
      margin-right: 0px;
    }
  }
  .tips-content{
    line-height: 1.8;
  }
  .font-gray{
    color: #999999!important;
  }
  .panel-box{
    h2{
      &:before{
        content: '';
        display: inline-block;
        vertical-align: top;
        width: 5px;
        height: 15px;
        background: #f8c400;
        margin: 3px 10px 0 6px;
      }
    }
  }
  .setting input {
    width: 100%;
  }
  .setting textarea {
    width: 100%;
    height: 100px;
  }
  .div-input {
    border-bottom: #e5e5e5 1px solid;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 20px;
  }
  .div-input:last-child {
    border-bottom: 0;
  }
</style>
